<template>
  <div class="wrapper" style="height: 100vh;overflow-x: hidden;">
    <!-- 回到顶部 -->
    <el-backtop target=".wrapper" style="height:100px;width:100px;">
      <i class="el-icon-caret-top" style="font-size:50px;"></i>
    </el-backtop>

    <Top/>
    <div v-model="blogData" class="grid-content content bg-purple blog_bg " v-loading="loading">

      <div style="height:100px;line-height:100px;padding-left:1%;display:flex;align-items: center;justify-content: space-between;">
        <div>
          <i style="margin-left: 20px;" class="el-icon-date"><span style="font-size: 30px;"> {{blogData.updateTime}}</span></i>
          <i style="margin-left: 20px;" class="el-icon-view"><span style="font-size: 30px;"> {{blogData.views}}</span></i>
          <i style="margin-left: 20px;" class="el-icon-chat-line-square"><span style="font-size: 30px;"> {{blogData.commentCount}}</span></i>
        </div>
      </div>
      <div style="background-color: #DCDFE6;height: 2px;margin: 5px 0;"></div>
      <div>
        <img style="width: 96%;height: 400px;margin: 2%;" :src="blogData.firstPicture">
      </div>
      <div style="text-align: center;">
        <div style="font-size:50px;font-weight:bold;" >{{blogData.title}}</div>
        <el-tag style="font-size:30px;">{{blogData.flag}}</el-tag>
        <el-tag type="success" style="margin-left: 10px;font-size:30px;">{{typeName}}</el-tag>
        <el-tag v-for="(tag,index) in blogData.tblogTags" :key="index" type="info" style="margin-left: 10px;font-size:30px;">{{tag.ttag.name}}</el-tag>

      </div>
      <div class="markdown-body" v-html="blogData.contentHtml" style="padding: 40px;font-size:40px;"></div>
      <!-- 评论 -->
      <Comment :blogId=id style="padding-bottom: 3px;"></Comment>
    </div>

    <!--占位-->
    <div style="height:200px;"></div>
  </div>
</template>

<script>
import Top from '@/components/move/Top'
import Comment from '@/components/move/Comment'
import 'github-markdown-css'
export default {
  name: 'Blog',
  components:{ Top,Comment },
  data () {
    return {
      blogData:'', //博客数据
      avatar:'', //头像
      username: '', //用户名
      typeName:'', //分类名称
      loading: true,//加载
    }
  },
  props:['id'], //接收路由传过来的id

  created(){
    // 表示进入了blog页
    this.$loading({}).close()
  },

  mounted() {
    this.initBlog()

    this.url = window.location.href
    this.hash = document.URL

    // console.log('$route.path:',this.$route.path)

    // // 如果支持 popstate （一般移动端都支持）
    // if (window.history && window.history.pushState) {
    //   // 往历史记录里面添加一条新的当前页面的url
    //   history.pushState(null, null, document.URL);
    //   // 给 popstate 绑定一个方法监听页面刷新
    //   window.addEventListener('popstate', this.backNative, false); //false阻止默认事件
    // }
  },

  // //销毁钩子
  // destroyed() {
  //   window.removeEventListener('popstate', this.backNative, false); //false阻止默认事件
  // },

  methods:{

    // backNative() {
    //   // // console.log("监听到了");
    //   // if(this.$store.getters.getSource == "type"){
    //   //   this.$router.replace("/type")
    //   // }else if(this.$store.getters.getSource == "tag"){
    //   //   this.$router.replace("/tag")
    //   // }else if(this.$store.getters.getSource == "blog"){
    //   //   this.$router.replace("/")
    //   // }
    //
    //   this.$router.go(-1)
    //   // this.$router.back()
    //   // window.history.go(-1)
    //   // window.history.back()
    // },

    initBlog(){
      const _this = this
      // console.log("id="+this.id)
      this.axios.get('/blog/getByBlogId?id=' + this.id).then(resp=>{
        // console.log("数据")
        // console.log(resp)
        _this.blogData = resp.data.obj
        _this.avatar = resp.data.obj.tuser.avatar || ''
        _this.username = resp.data.obj.tuser.username || ''
        _this.typeName = resp.data.obj.ttype.name || ''
        var MardownIt = require("markdown-it")
        var md = new MardownIt()
        var result = md.render(resp.data.obj.content)
        _this.blogData.content = result
        _this.loading = false
        // console.log(_this.blogData)
      })
    },
  }
}
</script>

<style scoped>
.blog_bg{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 95%;
  margin-top: 5% !important;
  margin-bottom: 5% !important;
  margin: auto;
  min-height: 500px;
}
</style>